﻿@inject IChatApplicationService ChatApplicationService
@inject IUserContext UserContext
@inject LocalStorageJsInterop LocalStorageJsInterop
@inject JsHelperModule JsHelperModule
@inject IPopupService PopupService

<div class="chat-container">
    @if (ChatDialogHistory?.Result == null || ChatDialogHistory.Result.Count == 0)
    {
        <div class="message  not-current-user">
            <div class="function-container ">
                <MAvatar>
                    <MImage Src="https://blog-simple.oss-cn-shenzhen.aliyuncs.com/Avatar.jpg"></MImage>
                </MAvatar>
            </div>
            <div class="message not-current-user-item">
                <MMarkdownIt Source="@ChatApplication.Opener"
                             Html="true"
                             Breaks="true"
                             Linkify="true"
                             Typographer="true"
                             Class="mt-4 pa-1" />
            </div>
        </div>
    }
    else
    {
        @foreach (var item in ChatDialogHistory.Result)
        {
            <div class="message @(item.Current?"current-user":"not-current-user")">
                <div class="function-container ">
                    @if (item.Current)
                    {
                        <MButton OnClick="() =>  RemoveHistoryAsync(item.Id)" Small Icon>
                            <MIcon Small>mdi-delete</MIcon>
                        </MButton>
                        <MButton Small OnClick="()=>OnCopy(item.Content)" Icon>
                            <MIcon Small>mdi-content-copy</MIcon>
                        </MButton>
                        <MAvatar>
                            <MImage Src="https://blog-simple.oss-cn-shenzhen.aliyuncs.com/Avatar.jpg"></MImage>
                        </MAvatar>
                    }
                    else
                    {
                        <MAvatar>
                            <MImage Src="https://blog-simple.oss-cn-shenzhen.aliyuncs.com/Avatar.jpg"></MImage>
                        </MAvatar>
                        <MButton Small OnClick="()=>OnCopy(item.Content)" Icon>
                            <MIcon Small>mdi-content-copy</MIcon>
                        </MButton>
                        <MButton OnClick=" () => RemoveHistoryAsync(item.Id)" Small Icon>
                            <MIcon Small>mdi-delete</MIcon>
                        </MButton>
                    }
                </div>
                <div class="message @(item.Current?"current-user-item":"not-current-user-item")">
                    <MMarkdownIt Source="@item.Content"
                                 Html="true"
                                 Breaks="true"
                                 Linkify="true"
                                 Typographer="true"
                                 Class="mt-4 pa-1" />
                </div>
            </div>
        }
    }
</div>

<MDivider></MDivider>
<!-- 输入框区域 -->
<div class="input-area">
    <ChatInputArea Height="@("90px")" OnSubmit="Submit">
        <FuntionContent>
            <MButton Class="ma-2"
                     Text
                     Icon>
                <MIcon>mdi-arrow-up-bold-box-outline</MIcon>
            </MButton>
        </FuntionContent>
    </ChatInputArea>
</div>

<style>
    /* 基础样式 */
    .chat-container {
        display: flex;
        flex-direction: column;
        margin: 0 auto;
        padding: 10px;
        height: calc(100vh - 260px);
        overflow: auto;
    }

    .message {
        padding: 5px 10px;
        margin: 5px;
        border-radius: 10px;
    }

        /* 非当前用户的消息样式 */
        .message.not-current-user {
            align-self: flex-start;
        }

        /* 当前用户的消息样式 */
        .message.current-user {
            align-self: flex-end;
            display: flex;
            justify-content: flex-end;
            flex-wrap: wrap;
        }

        /* 非当前用户的消息样式 */
        .message.not-current-user-item {
            background-color: #f0f0f0;
            width: 70%;
        }

        /* 当前用户的消息样式 */
        .message.current-user-item {
            background-color: #9fdf9f;
            width: 70%;
        }
    /* 输入框和发送按钮的样式 */
    .input-area {
        display: flex;
        margin-top: auto;
    }

        .input-area input {
            flex-grow: 1;
            padding: 10px;
            border: 1px solid #ccc;
            border-right: none;
        }

        .input-area button {
            padding: 10px;
            color: white;
            border: none;
        }

    .theme--light.m-application code {
        background-color: #d1d1d1 !important;
    }


    .function-container {
    }

</style>